<template>
  <div class="container">
    <div class="inner_container">
      <div class="table">
        <el-form :inline="true" ref="selectForm" label-width="70px" :model="listQuery.entity">
          <el-form-item label="宿舍号">
            <el-input v-model="listQuery.entity.number" clearable placeholder="输入宿舍号" size="small"></el-input>
          </el-form-item>
          <el-form-item label="宿舍楼" v-has-permi="['manage:building:list']">
            <el-select @visible-change="visibleChange"
                       v-model="listQuery.entity.buildingId"
                       placeholder="选择宿舍楼" size="small" clearable filterable :loading="selectLoading">
              <el-option
                  v-for="item in buildingList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="入住状态">
            <el-select v-model="listQuery.entity.isFull" clearable size="small">
              <el-option
                  label="未满"
                  :value="false">
              </el-option>
              <el-option
                  label="已满"
                  :value="true">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button size="mini" type="primary" @click="select">查询</el-button>
            <el-button size="mini" type="danger" @click="reset">重置</el-button>
            <el-button size="mini" type="primary" v-has-permi="['room:save']" @click="showDialog(undefined)">新增</el-button>
          </el-form-item>
        </el-form>
        <el-table :data="pageInfo.list" v-loading="loading" height="410">
          <el-table-column label="序号">
            <template slot-scope="scope">{{ (listQuery.page - 1) * (listQuery.rows) + scope.$index + 1 }}</template>
          </el-table-column>
          <el-table-column prop="number" label="寝室号"></el-table-column>
          <el-table-column prop="building.name" label="所属宿舍楼"></el-table-column>
          <el-table-column prop="maxCapacity" label="最大人数"></el-table-column>
          <el-table-column prop="currentNum" label="现有人数"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" v-has-permi="['room:query']" @click="showDialog(scope.row.id)">详情</el-button>
              <template>
                <el-popconfirm title="确定删除吗？" @confirm="del(scope.row.id)">
                  <el-button style="margin-left: 8px" v-has-permi="['room:delete']"
                             slot="reference"
                             size="mini" type="danger">删除
                  </el-button>
                </el-popconfirm>
              </template>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="page">
        <el-pagination
            background
            :page-size="listQuery.rows"
            :page-count="pageInfo.pages"
            layout="-> ,prev, pager ,next, jumper, total, sizes"
            :total="pageInfo.total"
            :current-page.sync="pageInfo.pageNum"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
        >
        </el-pagination>
      </div>
      <div class="dialog">
        <el-dialog
            :title="dialogTitle"
            :visible.sync="dialogVisible"
            width="50%"
            @closed="handleClose">
          <el-form ref="saveOrUpdateForm" :rules="rules" :model="room" label-width="80px">
            <el-form-item label="宿舍号" prop="number">
              <el-input v-model="room.number"></el-input>
            </el-form-item>
            <el-form-item label="宿舍楼" prop="buildingId">
              <tree-select
                  v-model="room.buildingId"
                  :options="buildingTree"
                  :normalizer="normalizer"
                  :show-count="true"
                  placeholder="选择宿舍楼">
              </tree-select>
            </el-form-item>
            <el-form-item label="容量" prop="maxCapacity">
              <el-input-number v-model="room.maxCapacity"></el-input-number>
            </el-form-item>
          </el-form>
          <div v-if="studentList.length">
            <el-table :data="studentList">
              <el-table-column label="姓名" prop="name"></el-table-column>
              <el-table-column label="学号" prop="number"></el-table-column>
              <el-table-column label="班级" prop="faculty.name"></el-table-column>
              <el-table-column label="电话" prop="phone"></el-table-column>
              <el-table-column label="注册日期" prop="registrationDate"></el-table-column>
              <el-table-column label="是否在寝" width="100">
                <template slot-scope="scope">
                  <span style="color: #67C23A" v-if="!scope.row.isLeave">是</span>
                  <span style="color: #909399" v-else>否</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <span slot="footer" class="dialog-footer">
              <el-button type="danger" @click="handleClose">取 消</el-button>
              <el-button type="primary" @click="saveOrUpdate"
                         v-has-permi="['room:update','room:save']">保 存</el-button>
            </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import {list, query, saveOrUpdate, del} from '@/api/room'
import {list as listBuilding, listAll} from "@/api/building";
import {list as listStudent} from '@/api/student'
import TreeSelect from '@riophae/vue-treeselect'
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  name: "index",
  components: {
    TreeSelect
  },
  methods:{
    // 关闭弹出框
    handleClose() {
      this.room = {}
      this.studentList = []
      this.$refs['saveOrUpdateForm'].resetFields()
      this.dialogVisible = false
    },
    // 保存或更新宿舍信息
    saveOrUpdate() {
      const _this = this
      this.$refs['saveOrUpdateForm'].validate((valid) => {
        if (valid) {
          // 调用后端API保存或更新宿舍信息
          saveOrUpdate(this.room).then(res => {
            if (res.statusCode === 200) {
              // 显示保存或更新成功消息，并刷新列表数据
              this.$message({
                message: res.msg,
                type: 'success'
              });
              _this.handleClose()
              _this.listData()
            }
          })
        } else {
          // 显示错误消息
          this.$message({
            message: '请正确填写参数',
            type: 'error'
          });
          return false;
        }
      })
    },
    // 显示添加或详情弹出框
    async showDialog(id) {
      await this.getBuildingTree()
      if (id) {
        // 根据宿舍ID查询宿舍信息
        const {data} = await query(id)
        if (data) {
          await this.getStudentList(id)
          this.room = data
          this.dialogVisible = true
        }
      } else {
        this.dialogVisible = true
      }
    },
    // 获取宿舍内学生列表
    async getStudentList(id) {
      const {data} = await listStudent({
        entity: {roomId : id},
        rows: 10,
        page: 1
      })
      this.studentList = data.list
    },
    // 获取宿舍楼树形列表
    async getBuildingTree() {
      const {data} = await listBuilding()
      this.buildingTree = data
    },
    // 弹出框可见性改变时触发
    async visibleChange(val) {
      if (val) {
        this.selectLoading = true
        const {data} = await listAll()
        this.buildingList = data
        this.selectLoading = false
      } else {
        this.buildingList = []
      }
    },
    // 删除宿舍信息
    del(id) {
      del(id).then(res => {
        if (res.statusCode === 200) {
          // 显示删除成功消息，并刷新列表数据
          this.$message({
            message: res.msg,
            type: 'success'
          });
          this.listData()
        }
      })
    },
    // 执行查询操作
    select() {
      this.listQuery.page = 1
      this.listData()
    },
    // 刷新宿舍列表数据
    async listData() {
      this.loading = true
      const {data} = await list(this.listQuery)
      this.pageInfo = data
      this.loading = false
    },
    // 处理分页大小改变事件
    handleSizeChange(val) {
      this.listQuery.rows = val
      this.listData()
    },
    // 处理当前页码改变事件
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.listData()
    },
    // 重置查询条件
    reset() {
      this.listQuery.page = 1
      this.listQuery.entity = {}
      this.listData()
    },
    // 自定义树形节点规范化方法，用于显示树形下拉选择器
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.name,
        children: node.children
      };
    }
  },
  data() {
    // 自定义校验规则，用于验证宿舍容量
    const validatePass = (rule, value, callback) => {
      if (value < 1) {
        callback(new Error('容量需要大于1'));
      } else {
        callback();
      }
    };
    return {
      studentList:[],
      listQuery: {
        page: 1,
        rows: 10,
        entity: {}
      },
      pageInfo: {},
      loading: false,
      dialogVisible: false,
      dialogTitle: '新增宿舍',
      room: {
        id: undefined,
        number: undefined,
        buildingId: undefined,
        maxCapacity: undefined,
        isFull: undefined
      },
      buildingTree: [],
      buildingList: [],
      selectLoading: false,
      // 表单验证规则
      rules: {
        number: [
          {required: true, message:'宿舍号不能为空', trigger: 'blur'}
        ],
        buildingId: [
          {required: true, message: "请选择宿舍楼", trigger: 'blur'}
        ],
        maxCapacity: [
          {required: true, message: '容量不能为空', trigger: 'blur'},
          {validator:validatePass, message: '容量须大于1', trigger: 'blur'}
        ]
      }
    }
  },
  created() {
    // 组件创建时执行查询
    this.listData()
  }
}
</script>

<style scoped>
.table {
  padding: 30px;
}
</style>
